<!-- 会议室预约情况 -->
<template>
	<view class="">
		<view class="page" :style="!isData?'display:flex;width: 100vw;height:100vh;align-items:center;justify-content: center;':''">
			<template v-if="isData">
				<view class="list" v-for="(item,index) in dataList" :key="index">
					<view style="width: 100%;">
						<view class="option">
							<view class="lf">预约时间</view>
							<view class="rl">{{ item.beginDate+' ' + item.beginTime }} ~ {{ item.endDate+' ' + item.endTime }}</view>
						</view>
						<view class="option">
							<view class="lf">预约人员</view>
							<view class="rl">{{ filterMultiDictText(dictOptions['applyUser'], item.applyUser + '') }}</view>
						</view>
						<view class="btn"  v-if="item.isMe">
							<view class="btn-btn" @click="onCancel(item, index)">取消预约</view>
							<view style="color: rgba(0, 0, 0, .3)">|</view>
							<view class="btn-btn" @click.stop="onEdit(item, index)">编辑预约</view>
						</view>
					</view>
				</view>
				<!-- 加载更多显示 -->
				<view class=""><u-loadmore :status="statusLoadmore" /></view>
			</template>
			<view v-else>
				<u-empty
					mode="data"
					icon="/static/empty/data.png"
				>
				</u-empty>
			</view>
		</view>
		<view class="space-x-1 px-1 btn_position">
			<u-button type="primary" :plain="true" text="关闭" @click="onReturn"></u-button>
			<u-button type="primary"  text="立即预约" @click="onSubmit"></u-button>
		</view>
		<view style="height: 100rpx;"></view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>
<script>
	import { mapState } from 'vuex'
	import http from '@/utils/request/index.js'
	import { filterMultiDictText, initDictOptions } from '@/utils/JDictSelectUtil.js'
	import { erpMeetingReservation, erpMeetingRoomList } from '@/api/meeting/erpMeetingReservation'
	import moment, { unix } from 'moment'
	export default {
		data() {
			return {
				filterMultiDictText,
				initDictOptions,
				dataList: [] ,// 列表
				info: {}, // 所有数据
				isData: true, // 判断是否有数据  true 代表有 false 代表无
				statusLoadmore: 'loadmore', // 通过status设置组件的状态，加载前值为loadmore，加载中为loading，没有数据为nomore
				dictOptions: {}
			}
		},
		computed: {
		  ...mapState(['userInfo']),
		},
		onLoad(options) {
			this.initDictConfig()
			// this.statusLoadmore = 'loading' // 加载中
			if (options.info) {
			  this.info = JSON.parse(options.info)
				uni.setNavigationBarTitle({
					title: this.info.roomInfo.roomName
				})
			}
		},
		onShow() {
			if (this.info) {
				this.getList()
			} else {
				this.dataList = []
			}
		},
		methods: {
			async getList() {
				this.statusLoadmore = 'loading' // 加载中
			  try {
			    this.dataList = [] // 会议室预约时间
			    await erpMeetingReservation({
						beginDate: moment(this.info.date).format('YYYY-MM-DD'),
						endDate: moment(this.info.date).format('YYYY-MM-DD'),
			    }).then((res) => {
						// 处理方式：
						// 1、预约情况展示的是当前选择的会议室，需要把数据循环出来
						if (res.success) {
							let resources = []
							if (res.result != null) {
								res.result.map((value, index1) => {
									// 循环会议室名称和点击的会议室是否相互匹配
									value.roomList.map((value2, index2) => {
										if (value2.id == this.info.roomInfo.id) {
											this.dataList = value2.reservationList || []
										}
									})
								})
							}
							if (this.dataList && this.dataList.length) {
								this.isData = true
								this.dataList.map(value => {
									value.isMe = value.applyUser == uni.getStorageSync('userInfo').empId
									return value
								})
							} else {
								this.isData = false
							}
							this.statusLoadmore = 'nomore'
						}
			    })
			  } finally {
			    // this.loading = false
			  }
			},
			initDictConfig() {
			  initDictOptions('erp_employee_file,name,id').then((res) => {
			    if (res.success) {
			      this.$set(this.dictOptions, 'applyUser', res.result)
			    }
			  })
			},
			// 编辑预约
			onEdit (item, index) {
				var record =  {...this.info.roomInfo, ...item, reservationList: this.dataList}
				uni.navigateTo({
					url: `/pages/meeting/erpMeetingReservationForm?info=${JSON.stringify(record)}&type=edit&date=${this.info.date}`
				})
			},
			onCancel (item, index) {
				var _this = this
				// 取消预约
				uni.showModal({
					content: '是否取消预约？',
					success: function (res) {
						if (res.confirm) {
							_this.cancel(item, index)
						} else if (res.cancel) {
							// 用户点击取消
						}
					}
				})
			},
			// 取消会议
			cancel(item, index){
				if(item.id){
					http.delete('/api/erp/oa/meeting/erpMeetingReservation/delete',{id:item.id}).then(res=>{
						if(res.success){
							uni.showToast({
								title: '取消成功',
								icon: 'none'
							})
							this.dataList.splice(index, 1)
						}
					}).catch(()=>{
						uni.showToast({
							title: '取消失败，请重试!',
							icon: 'none'
						})
					})
				}
			},
			onReturn () {
				uni.navigateBack()
			},
			// 点击立即预约
			onSubmit () {
				var record = {...this.info.roomInfo }
				// record = this.dataSource[index]
				      // record.beginTime = time
				      // record.applyUserDept = this.applyUserDept
				      // var endTime = time.indexOf(':')
				      // var endTimeNumber = Number(time.substring(0, endTime))
				      // record.endTime = (endTimeNumber + 1) + ':00'
				      // this.$refs.modalForm.add(record, this.dataSource[index])
				uni.navigateTo({
					url: `/pages/meeting/erpMeetingReservationForm?info=${JSON.stringify(record)}&type=add&date=${this.info.date}`
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	@import url("@/assets/inputStyle.scss");
.page {
	padding: 0 20rpx 20rpx 20rpx;
	.list{
		border-radius: 10rpx;
		box-shadow: 0px 4px 20px 0px rgba(0,0,0,0.1);
		padding: 12rpx 20rpx 20rpx 20rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
		.option {
			width: 100%;
			margin-bottom: 4rpx;
		}
	}
}

// 按钮
.btn{
	margin-top: 10rpx;
	border-top: 1px solid #ccc;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 15rpx 0 0 0;
	font-size: 14px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #1E6FFF;
	width: 100%;
	text-align: center;
	.btn-btn{
		text-align: center;
		width: 48%;
	}
}
</style>

